<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: darkred;
            color: white;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <!-- 页面元素(标签) -->
    <!-- DOM : document object model  (文档对象模型) 控制页面元素的一套标准. -->
    <!-- DOM操作: 对页面元素的控制. 
        1.0 查找元素 (获取元素)
        2.0 创建元素
        3.0 添加元素
        4.0 删除元素
        5.0 控制元素的样式
        6.0 控制元素的属性 (class , id )
        7.0 控制元素的文本
        ...
    -->
    <div> hello DIV 1</div>
    <div> hello DIV 2</div>
    <div>我爱你</div>

    <script>

        // document  是文档对象
        console.dir(document);
        // 获取元素 div
        var elements = document.getElementsByTagName("div");
        // var elements = document.getElementsByTagName("h2");
        // 打印标签数组
        console.log(elements);

        // 第一个div 
        // elements[0]
        console.log(elements[0]);

        // 第二个div 
        // elements[1]
        console.log(elements[1]);
        console.log(elements[2]);

        // 设置第一个div背景色为绿色 
        // elements[0].style 设置css样式
        elements[0].style.backgroundColor = "green";

        // 设置第一个div背景色为蓝色 
        elements[1].style.backgroundColor = "blue";
        elements[2].style.color = "red";


    </script>
</body>
</html>